<template>
	<el-row class="tac">
		<div class="div1">
			<div class="div11">
				<p class="p1">现代购书管理系统</p>
			</div>
			<div class="div12">
				<p class="p2">欢迎光临！<el-button class="login"
						@click="goUser()">{{this.$store.state.name}}</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录时间:{{this.$store.state.today}}
				</p>
			</div>
			<div class="div13">

			</div>
			<div class="div14">
				<el-link class="out" type="info" :underline="false" @click="out()">退出</el-link>
			</div>
		</div>

		<el-col :span="4" class="col4" style=" height:100vh">
			<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
				active-text-color="#ffd04b">
				<el-submenu index="1">
					<template slot="title">
						<span>热点图片</span>
					</template>
					<el-menu-item-group>
						<router-link to="/backendManage/hotPicturc">
							<el-menu-item index="1-1">热点图片</el-menu-item>
						</router-link>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="2">
					<template slot="title">
						<span>类型管理</span>
					</template>
					<el-menu-item-group>
						<router-link to="/backendManage/oneAdmin">
							<el-menu-item index="2-1">一级类型</el-menu-item>
						</router-link>
					</el-menu-item-group>
					<el-menu-item-group>
						<router-link to="/backendManage/twoAdmin">
							<el-menu-item index="2-2">二级类型</el-menu-item>
						</router-link>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title">
						<span>商品管理</span>
					</template>
					<el-menu-item-group>
						<router-link to="/backendManage/commodityList">
							<el-menu-item index="3-1">商品列表</el-menu-item>
						</router-link>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="4">
					<template slot="title">
						<span>用户管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="4-1">冻结密码重置</el-menu-item>
					</el-menu-item-group>
					<el-menu-item-group>
						<el-menu-item index="4-2">管理员添加</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="5">
					<template slot="title">
						<span>订单管理</span>
					</template>
					<el-menu-item-group>
						<router-link to="/backendManage/queryDetails">
							<el-menu-item index="5-1">订单详情</el-menu-item>
						</router-link>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="6">
					<template slot="title">
						<span>网站首页</span>
					</template>
					<el-menu-item-group>
						<router-link to="/pc/home">
							<el-menu-item index="6-1">PC端</el-menu-item>
						</router-link>
					</el-menu-item-group>
					<el-menu-item-group>
						<router-link to="/mobile/home">
							<el-menu-item index="6-">Mobile端</el-menu-item>
						</router-link>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</el-col>
		<el-col :span="20">
			<router-view>改查的操作区域</router-view>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goUser() {
				this.$router.push('/pc/update/updatepwd');
			}
		}
	}
</script>

<style scoped>
	.tac {
		width: 100%;
		height: 100%;
	}

	.div1 {
		width: 100%;
		height: 80px;
		background-color: #23262e;
		display: flex;
	}

	.div11 {
		width: 17%;
		color: #009688;
		display: flex;
	}

	.div12 {
		width: 40%;
		color: white;
		display: flex;
		border-bottom: 5px solid #5fb878;
	}

	.div13 {
		width: 33%;
	}

	.div14 {
		width: 10%;
		display: flex;
	}

	.div14 .out {
		color: white;
	}

	.p1 {
		margin: 30px auto;
		font-size: 20px;
	}

	.p2 {
		margin: 30px auto;
		font-size: 20px;
	}

	.p2 .login {
		border: 0;
		font-size: 20px;
		/* outline: none; */
		background-color: transparent;
		padding-left: 0px;
	}

	.p3 {
		margin: 30px auto;
		font-size: 15px;
		color: white;
	}

	.h4 {
		color: #adaaa4;
	}

	.topBox {
		display: flex;
	}

	.topBoxSon1 {
		width: 90%;
	}

	.topBoxSon2 {
		width: 10%;
		margin: 10px auto;
	}

	.bottomBox {
		width: 100%;
		height: 50px;
		margin-top: 670px;
		background-color: #D3D3D3;
		display: flex;
	}

	.bottomBox.p {
		margin: 20px auto;
	}

	.row {
		padding-left: 40px;
	}

	.col4 {
		background-color: #393d49;
	}
</style>